<template>
  <section  class="evaluate">
    <div class="pads">
      <div class="pads-top">
        <img
          :src="item.cover"
          style="width:45px;height:45px;border-radius: 50%;margin-right:10px"
        >
        <div style="font-size:14px">{{item.nick_name}}</div>
        <div
          class="create-time"
          style="color:#999;font-size:12px;"
        >{{item.create_time}}</div>
      </div>
      <div class="pads-algin">
        <div>{{item.txt}}</div>
        <img :src="item.scoreImg">
      </div>
      <div class="pads-bottom">
        <div>{{item.content}}</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style lang="less" scoped>
.pads {
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 6px;
}
.pads-top {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  position: relative;
}
.create-time {
  position: absolute;
  right: 0;
}
.pads-algin {
  width: 100%;
  height: 30px;
  margin: 10px 0px;
  display: flex;
  align-items: center;
  div {
    height: 30px;
    line-height: 30px;
    color: #ff9300;
    font-size: 12px;
  }
  img {
    width: 50%;
    height: 16px;
  }
}
.pad-bottom {
  font-size: 14px;
  color: #1a1a1a;
  padding-bottom: 10px;
}
.pads-bottom {
  font-size: 14px;
  color: #1a1a1a;
  padding-bottom: 10px;
  width: 100%;
}
.evaluate {
  width: 100%;
  box-sizing: border-box;
  padding: 0 5%;
  margin: 10px 0px;
}
</style>
